<template>
  <div>
    <div>
      <mt-header title="订单详情" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div v-if="this.ordertype === 'ticket'">
      <div class="div-title">
        <div class="div-title-left-child">
          <img src="../../assets/images/tool/shrxx.png">
        </div>
        <div class="div-title-left-child">
          联系人：{{mpr}}
        </div>
        <div class="div-title-right-child">
          {{mprdh}}
        </div>
      </div>
      <div class="div-title" style="border-top: 10px solid #eeeeee;">
        <div class="div-title-left-child">
          <img src="../../assets/images/tool/jdmc.png">
        </div>
        <div class="div-title-left-child">
          {{jdmc}}
        </div>
      </div>
      <div class="div-body" v-for="(ddxx)  in ddxx" :key="ddxx.mpid">
        <div class="div-body-img">
          <img src="../../assets/images/photo/test.jpeg">
        </div>
        <div class="div-body-spmc">
          {{ddxx.mpmc}}
        </div>
        <div class="div-body-spdj">
          <span style="color:#888;">{{ddxx.mpsl}}</span> ×
          <span style="color:black;">{{ddxx.mpjg}}</span>
        </div>
        <div class="div-getInTime">入园时间：{{ddxx.rysj}}</div>
      </div>
      <div class="div-title">
        <div class="div-title-left-child">实付款：</div>
        <div class="div-title-right-child">{{sfk}}</div>
      </div>
      <div class="div-bottom">
        <div class="div-bottom-child">
          <div class="div-title-left-child">订单编号：</div>
          <div class="div-title-right-child">{{ddbh}}</div>
        </div>
        <div class="div-bottom-child">
          <div class="div-title-left-child">下单时间：</div>
          <div class="div-title-right-child">{{xdsj}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import { Loadmore } from "mint-ui";
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      ddhm: this.$route.query.rq,
      ordertype: this.$route.query.ordertype,
      jdmc: "",
      ddbh: "",
      ddxx: [],
      mpr: "",
      mprdh: "",
      ddzj: "",
      sfk: "",
      xdsj: "",
      yhjg: ""
    };
  },
  created() {
    // console.group("created 创建完毕状态===============》");
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  methods: {
    goBack() {
      this.$store.dispatch("showTabbar", { boolean: "0" });
      history.go(-1);
    },
    getTicketOrderDetail() {
      let global_members_id = JSON.parse(
        localStorage.getItem("global_members_id")
      );
      axios({
        method: "post",
        url: "/api/My/MpOrder/detail.htm",
        params: {
          id: global_members_id,
          lxsuserid: "",
          ddh: this.ddhm
        }
      }).then(res => {
        res = res.data;
        if (res.zt === "true") {
          console.log(res);
          this.mpr = res.data[0].mpr;
          this.mprdh = res.data[0].mprdh;
          this.jdmc = res.data[0].jdmc;
          this.ddxx = res.data[0].ddxx;
          this.sfk = res.data[0].sfk;
          this.ddbh = res.data[0].ddbh;
          this.xdsj = res.data[0].xdsj;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "加载失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    }
  },
  mounted() {
    this.getTicketOrderDetail();
  }
};
</script>

<style scoped>
.div-title {
  overflow: hidden;
  padding-bottom: 2%;
  padding-top: 2%;
  border-bottom: 1px solid #eee;
}
.div-title-left-child {
  float: left;
  padding-left: 15px;
}
.div-title-left-child > img {
  height: 20px;
  width: 20px;
}
.div-title-right-child {
  float: right;
  padding-right: 15px;
}
.div-body {
  overflow: hidden;
  background-color: #fafafa;
  padding-top: 2%;
  padding-bottom: 2%;
  border-bottom: 1px solid #eee;
}
.div-body-img {
  float: left;
  padding-left: 15px;
  width: 20%;
  height: 90px;
}
.div-body-img > img {
  width: 60px;
  height: 60px;
}

.div-body-spmc {
  float: left;
  width: 40%;
  padding-left: 15px;
}
.div-body-spdj {
  float: right;
  width: 20%;
}
.div-sfk {
  margin: 5px;
}
.div-bottom {
  overflow: hidden;
  padding-bottom: 2%;
  padding-top: 2%;
  background-color: #fafafa;
  border-bottom: 1px solid #fafafa;
}
.div-bottom-child {
  overflow: hidden;
  background-color: #fafafa;
}
.div-getInTime {
  float: left;
  padding-left: 15px;
}
</style>
